<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户信息表</title>
	<style type="text/css">
		table{
			width: 600px;
		}
		table tr{
			height: 50px;
		}
	</style>
</head>
<body>
	<table align="center" border="1" cellspacing="0" cellpadding="10">
		<caption><h2>用户信息表</h2></caption>
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>Email</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>洪在烈</td>
				<td>18</td>
				<td>男</td>
				<td>zailieHong@qq.com</td>
				<td><input type="button" name="" value="删除" id="shanchu"></td>
			</tr>
		</tbody>
		<tfoot align="center">
			<tr>
				<td colspan="5"><input type="button" name="" value="删除首行" id="delFirstBtn">
					<input type="button" name="" value="删除末行" id="delLastBtn"></td>
			</tr>
		</tfoot>
	</table>
	<form align="center">
		<fieldset>
			<legend><h3>填写用户信息</h3></legend>
			<p>姓名：<input type="text" name="username" id="username"></p>
			<p>年龄：<input type="text" name="age" id="age"></p>
			<p>性别：<input type="radio" name="gender" id="male" value="男" checked>男
					<input type="radio" name="gender" id="female" value="女">女</p>
			<p>Email：<input type="text" name="Email" id="Email"></p>
			<p><input type="button" name="" value="添加" id="btn"></p>
			
		</fieldset>
	</form>
</body>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	function c(ele){
		return document.createElement(ele);
	}
	var tb=$('tb');
	var btn=$('btn');
	var shanchu=$('shanchu');
	shanchu.onclick=function(){
		$('tb').removeChild(this.parentNode.parentNode);
	}
	btn.onclick=function(){
		//收集数据
		var username=$('username').value;
		var age=$('age').value;
		var gender=$('male').check=true?$('male').value:$('female').value;
		var Email=$('Email').value;
		//创建新的列来存放数据
		var tdName=c('td');
		var tdAge=c('td');
		var tdGender=c('td');
		var tdEmail=c('td');
		//存放数据
		tdName.innerText=username;
		tdAge.innerText=age;
		tdGender.innerText=gender;
		tdEmail.innerText=Email;
		//创建删除按钮
		var tdDel=c('td');
		var delBtn=c('input');
		delBtn.type='button';
		delBtn.value='删除';
		tdDel.appendChild(delBtn);
		//绑定删除事件
		delBtn.onclick=function(){
			tb.removeChild(this.parentNode.parentNode);
		}
		var trAdd=c('tr');
		trAdd.appendChild(tdName);
		trAdd.appendChild(tdAge);
		trAdd.appendChild(tdGender);
		trAdd.appendChild(tdEmail);
		trAdd.appendChild(tdDel);
		tb.appendChild(trAdd);
		// //点击添加后，tb.children.length发生变化
		// delLastBtn.onclick=function(){
		// 	tb.removeChild(tb.children[tb.children.length-1]);
		//点击后刷新页面 
		// btn.type='reset';
		// }
	}

		//创建两个新列 并放入两个删除键
		// var tdDelFirst=c('td');
		// var tdDelLast=c('td');
		// var delFirstBtn=c('input');
		// delFirstBtn.type='button';
		// delFirstBtn.value='删除首行';
		// delFirstBtn.id='delFirstBtn';
		// var delLastBtn=c('input');
		// delLastBtn.type='button';
		// delLastBtn.value='删除末行';
		// delLastBtn.id='delLastBtn';
		// //创建一个新行放他们
		// var trDel=c('tr');
		// trDel.appendChild(delFirstBtn);
		// trDel.appendChild(delLastBtn);
		// //在tb里插入他们
		// tb.insertBefore(trDel,tb.children[tb.children.length]);
		// // console.log(tb.children);

		//绑定首行删除事件
		delFirstBtn.onclick=function(){
			tb.removeChild(tb.children[0]);
		}
		//绑定末行删除事件
		delLastBtn.onclick=function(){
			tb.removeChild(tb.children[tb.children.length-1]);
		}
</script>
</html>